import React, { Component  } from 'react'
import { Link } from "react-router-dom";
import { imgPre } from '../../request/http';
import { reqCate, reqCateGoods } from '../../request/api'
import { SideBar } from 'antd-mobile'
import './Cate.less'
import Header from '../../components/Header/Header';

export default class Cate extends Component {
  constructor() {
    super()
    this.state = {
      goodsCate: [],//分类
      goods: [],//商品
      fid: 1
    }
  }
  changeN(e) {
    this.setState({
      fid:Number(e)
    },()=>{
      reqCateGoods({ fid: this.state.fid }).then(res => {
      this.setState({
        goods: res.data.list
      })
    })
    })
  }
  render() {
    // 2.取数据
    let { goodsCate, goods, fid } = this.state;
    return (
      <div className="cate">
        <Header title="商品分类" back></Header>
        {/* 3.展示内容 */}
        {/* 3.1左边导航栏 */}
        <div className="list">
          <SideBar defaultActiveKey='1' onChange={(e) => this.changeN(e)}>
            {goodsCate.map(item => (
              <SideBar.Item  key={item.id} title={item.catename} />
            ))}
          </SideBar>
        </div>
        {/* 3.2对应内容区域 */}
        <div className="content">
          {goods.map((item, index) => {
            return <Link to={'/detail/1/'+ item.id} className='item' key={item.id}>
              <div className='left'>
                <img src={imgPre + item.img} alt="" />
              </div>
              <div className='right'>
                <h3>{item.goodsname}</h3>
                <div><span>{'￥' + item.price}</span><i>{'￥' + item.market_price}</i></div>
                <p>{item.description}</p>
              </div>
            </Link>
          })}
        </div>
      </div>
    )
  }
  componentDidMount() {
    // 1.一进页面发请求
    reqCate().then(res => {//分类信息
      this.setState({
        goodsCate: res.data.list
      })
    })
    reqCateGoods({ fid:1}).then(res => {//商品信息
      this.setState({
        goods: res.data.list
      })
    })
  }
}
